<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
    <title>World Projection</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
    <script type="text/javascript" src="../../lib/topojson.js"></script>

    <style>

        svg {
            border-width: 2px;
            border-color: grey;
        }

        body {
            background: #fcfcfa;
        }

        .map {
            float: left;
            margin: 20px;
            text-align: center;
        }

        .stroke {
            fill: none;
            stroke: #000;
            stroke-width: 3px;
        }

        .fill {
            fill: #fff;
        }

        .graticule {
            fill: none;
            stroke: #777;
            stroke-width: .5px;
            stroke-opacity: .5;
        }

        .land {
            fill: #222;
        }

        .boundary {
            fill: none;
            stroke: #fff;
            stroke-width: .5px;
        }

    </style>
</head>

<body>

<script type="text/javascript">
    var width = 300,
        height = 300,
        translate = [width / 2, height / 2];

    var projections = [
        {name: 'azimuthalEqualArea', fn: d3.geo.azimuthalEqualArea()
                .scale(50)
                .translate(translate)},
        {name: 'conicEquidistant', fn: d3.geo.conicEquidistant()
                .scale(35)
                .translate(translate)},
        {name: 'equirectangular', fn: d3.geo.equirectangular()
                .scale(50)
                .translate(translate)},
        {name: 'mercator', fn: d3.geo.mercator()
                .scale(50)
                .translate(translate)},
        {name: 'orthographic', fn: d3.geo.orthographic()
                        .scale(90)
                        .translate(translate)},
        {name: 'stereographic', fn: d3.geo.stereographic()
                                .scale(35)
                                .translate(translate)}
    ];

    d3.json("../../data/world-50m.json", function (error, world) {
        projections.forEach(function (projection) {
            var path = d3.geo.path()
                    .projection(projection.fn);

            var div = d3.select("body")
                    .append("div")
                    .attr("class", "map");

            var svg = div
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height);

            svg.append("path")
                    .datum(topojson.feature(world, world.objects.land))
                    .attr("class", "land")
                    .attr("d", path);

            svg.append("path")
                    .datum(topojson.mesh(world, world.objects.countries))
                    .attr("class", "boundary")
                    .attr("d", path);

            div.append("h3").text(projection.name);
        });
    });
</script>

</body>

</html>